<template>
  <span :title="names">{{ names }}</span>
</template>

<script lang="ts" setup>
import { ref, watch, toRefs } from 'vue'
import { dictQueryByFlag } from '@/api/dict'

const props = defineProps<{
  appCode: string
  flag: string
  value: string
}>()
const names = ref('')
const options = ref<any>(null)

watch(
  () => props.value,
  (val) => {
    setNames(val)
  }
)

const { appCode, flag } = toRefs(props)
// 查询字典
if (flag.value && appCode.value) {
  dictQueryByFlag({
    flag: flag.value,
    appCode: appCode.value
  }).then((res) => {
    options.value = res[flag.value]
    setNames(props.value)
  })
}

function setNames(value: string) {
  if (options.value) {
    const arr: string[] = []
    const valueArr = value.split(',')
    valueArr.forEach((item) => {
      const obj = options.value.find((el) => el.value === item)
      if (obj) {
        arr.push(obj.name)
      }
    })
    names.value = arr.join(',')
  }
}
</script>

<style lang="less"></style>
